//预览
/*
提供3个方法
preview('album',list) 主初始化
deleteOne('album',attachId) 删除1个
addOne('album',item) 添加一个

item{
attachId：附件主键
attachUrl：完整url地址
fileName：附件名称
attachType：附件类型
}
*/
var preview={
	
  data:null,
		
  //主入口
  preview:function(id,list){
    this.data=list
    if(list.length>0){
        if(list[0].attachId==null){
            
            if(list[0].id!=null){
              for(var item of list){
                item.attachId=item.id
              }
            }else {
              for(var i=0;i<list.length; i++) {
                list[i].attachId=i;         
              }
            }
          }
    }





    //获取模板
    var containerTemplate=this.containerTemplate();
    //放入
    $("#"+id).html(containerTemplate)
    //初始化
    this.init()
  },
  //删除一个对象
  deleteOne:function(id,attachId){
	  var newData=[]
	  for(var item of this.data){
		  if(item.attachId!=attachId){
			  newData.push(item)
		  }
	  }
	  this.preview(id,newData)
  },
  //添加一个对象
  addOne:function(id,item){
	  this.data.push(item)
	  this.preview(id,this.data)
  },

  //初始化
  init:function(){
		var Page = (function() {

      var $navArrows = $( '#nav-arrows' ).hide(),
        $navDots = $( '#nav-dots' ).hide(),
        $nav = $navDots.children( 'span' ),
        $shadow = $( '#shadow' ).hide(),
        slicebox = $( '#sb-slider' ).slicebox( {
          onReady : function() {
            $navArrows.show();
            $navDots.show();
            $shadow.show();
          },
          onBeforeChange : function( pos ) {
            $nav.removeClass( 'nav-dot-current' );
            $nav.eq( pos ).addClass( 'nav-dot-current' );
          }
        } ),
        
        init = function() {
          initEvents();          
        },
        initEvents = function() {
          // add navigation events
          $navArrows.children( ':first' ).on( 'click', function() {
            slicebox.next();
            return false;
          } );

          $navArrows.children( ':last' ).on( 'click', function() {            
            slicebox.previous();
            return false;
          } );

          $nav.each( function( i ) {          
            $( this ).on( 'click', function( event ) {              
              var $dot = $( this );              
              if( !slicebox.isActive() ) {
                $nav.removeClass( 'nav-dot-current' );
                $dot.addClass( 'nav-dot-current' );
              }
              slicebox.jump( i + 1 );
              return false;            
            } );            
          } );
        };
        return { init : init };
    })();
    Page.init();
  },



//pdf的模板
 pdfTemplate:function(item){
  return `
<li id="LicenceEdit_lidel_${item.attachId}" onclick="pic_look('${item.attachUrl}')">
  <a target="_blank"><img src="img/1.jpg" style='display:none' /></a>
  <div class="sb-description" style='margin-top: 50px;'>
    <h3>附件名称：${item.fileName}</h3>
  </div>
  <div id="LicenceEdit_Pdf_show_${item.attachId}" style="width:100%;height:500px"></div>
  <script>PDFObject.embed("${item.attachUrl}", "#LicenceEdit_Pdf_show_${item.attachId}");</script>
</li>
`;
},
//图片的模板
 imageTemplate:function(item){
  return `
<li id="LicenceEdit_lidel_${item.attachId}">
  <a target="_blank"><img src="${item.attachUrl}" class='album_pic'  onclick="bigger('${item.attachUrl}')" /></a>
  <div class="sb-description">
    <h3>附件名称：${item.fileName}</h3>
  </div>
</li>
`;
},
//容器模板
 containerTemplate:function(){
  var lis="";
  var spans="";
  for( var item of this.data){
    var li=item.attachType.toUpperCase()=='PDF'?this.pdfTemplate(item):this.imageTemplate(item);
    lis+=li
    spans+=`<span></span>`
  }
  return `
<div class="container">
  <div class="wrapper" style="padding: 0; left: 0; position: absolute; padding-top: 30px;width:100%">
    <ul id="sb-slider" class="sb-slider">
      ${lis}
    </ul>
    <div id="shadow" class="shadow"></div>
    <div id="nav-arrows" class="nav-arrows">
      <a href="#">Next</a>
      <a href="#">Previous</a>
    </div>
    <div id="nav-dots" class="nav-dots">
      ${spans}
    </div>
  </div>
</div>
`;
}


}

